<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            perspective: 1000px;
            -webkit-perspective: 1000px;
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;

        }
        .image{
            transform: rotateX(60deg) rotateY(10deg);
            /*过渡名称可以定义给transform*/
            /*过渡效果名称*/
            transition-property:transform;
            /*过渡需要多长时间*/
            transition-duration: 5s;
            /*过渡实现的方式*/
            transition-timing-function: ease;
            /*延迟多少秒之后实现过渡效果*/
            transition-delay: 2s;
        }
    </style>
</head>
<body>
     <div>
         <img src="img/pic_01.png">
     </div>
     <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
       $(function(){
           $("div").click(function(){
                $("img").attr("class","image");
           });
       });
    </script>
</body>
</html>